//4.部门TOP10-echarts
/*参数data:
var data = {
  name:['部门1', '部门2', '部门3', '部门4', '部门5', '部门6', '部门7', '部门8', '部门9', '部门10'],
  value:[600, 550, 520, 501, 486, 475, 470, 466, 420, 376]
};
*/

var MD04 = {
  f1:12*KO,
  f2:16*KO,
  W:0,
  H:0,
  md:null,
  init:function(el,data){
    this.guapai(el,data);
    // this.md.off('click');
    // this.md.on('click',function(item){
    //     console.log(item,123)
    // })
    
    // if(el){
    //   this.W = el.offsetWidth;
    //   this.H = el.offsetHeight;
    // }
    // if(this.md){
    //   this.md.setOption({
    //     series: [
    //       { data: data.zhu1 }, 
    //       { data: data.zhu2 }, 
    //       { data: data.zhu3 }
    //     ]
    //   })
    //   return false;
    // }else{
    // this.guapai(el,data)
    // }
  },
  guapai: function(el,data) {   
    // 指定图表的配置项和数据
    var option = {
        // backgroundColor: '#00265f',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              // label:{
              //   show:true,
              //   backgroundColor: '#FFED27',
              //   fontSize:this.f2,
              //   color:'#001A53'                  
              // }
            },
            textStyle:{
              fontSize:this.f2
            },
            formatter:'{b}<br><span style="color:#FFED27;">{c}</span>',
            padding:[5*KO,10*KO]
        },
        grid: {
            top: '15%',
            right: '10%',
            left: '10%',
            bottom: '30%'
        },
        xAxis: [{
            type: 'category',
            data: data.name,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            },
            axisLabel: {
                interval:0,      //强制显示所有刻度标签
                rotate:-30,       //标签旋转30度
                margin: 10*KO,
                color: '#e2e9ff',
                textStyle: {
                    fontSize: this.f1
                },
            },
        }],
        yAxis: [{
            axisLabel: {
                formatter: '{value}',
                color: '#e2e9ff',
                textStyle: {
                    fontSize: this.f1
                },
            },
            axisLine: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.12)'
                }
            }
        }],
        series: [{
            type: 'bar',
            data: data.value,
            barWidth: 20*KO,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                    }], false),
                    barBorderRadius: [30*KO, 30*KO, 30*KO, 30*KO],
                    shadowColor: 'rgba(0,160,221,1)',
                    shadowBlur: 4*KO,
                }
            },
            label: {
                normal: {
                    show: true,
                    // lineHeight: 20*KO,
                    // width: 80,
                    // height: 30*KO,
                    backgroundColor: 'rgba(0,160,221,0)',
                    borderRadius: 200,
                    position: [-2*KO, -15*KO],
                    distance: 1,
                    formatter: [
                        // '    {d|●}',
                        ' {a|{c}}     \n',
                        // '    {b|}'
                    ].join(','),
                    rich: {
                        // d: {
                        //     color: '#3CDDCF',
                        // },
                        a: {
                            color: 'yellow',
                            align: 'center',
                            fontSize:this.f1
                        },
                        // b: {
                        //     width: 1,
                        //     height: 30,
                        //     borderWidth: 1,
                        //     borderColor: '#234e6c',
                        //     align: 'left'
                        // },
                    }
                }
            }
        }]
    };

    // 基于准备好的dom，初始化echarts实例
    this.md = echarts.init(el);
    // 使用刚指定的配置项和数据显示图表。
    this.md.setOption(option);
  }
}


















